// Preview plugin
.cke {
	.cke_button__sakaipreview {
		.cke_button__sakaipreview_icon {
			background: url(/library/webjars/ckeditor4/4.22.1/skins/moono-lisa/icons_hidpi.png) no-repeat 0 -1920px !important;
			background-size: 16px !important;
		}
	}

	a.cke_toolbox_collapser {
		order: 1;
		height: 24px;
		width: 24px;
		line-height: 28px;
		margin: 0 6px 0 0;
		padding: 1px;
		color: $text-color;
		border-color: var(--sakai-border-color);
		background-color: #fff;

		&:hover,
		&:focus {
			background: var(--button-hover-background);
		}

		&:active {
			background: var(--button-active-background);
		}

		.cke_arrow {
			border-width: 6px;
			border-top-color: $text-color;
			border-bottom-color: transparent;
			margin: 0;
			position: relative;
			top: 2px;
			left: 0;
		}
	}

	a.cke_toolbox_collapser_min {
		.cke_arrow {
			border-left-color: $text-color;
			border-bottom-color: transparent;
			border-top-color: transparent;
			left: 4px;
			top:-2px;
		}
	}

	.cke_combo__format .cke_combo_button,
	.cke_combo__styles .cke_combo_button {
		border: 1px solid var(--sakai-border-color);
		padding: 0;
	}

	a.cke_button.cke_button__templates {
		padding: 4px 14px 4px 6px;

		&:hover,
		&:focus,
		&:active {
			padding: 3px 13px 3px 5px;
		}

		&.cke_button_disabled {
			.cke_button_label {
				opacity: .3;
			}

			&:hover,
			&:focus,
			&:active {
				padding: 4px 14px 4px 6px;
			}	
		}
	}

	a.cke_button.cke_button__source {
		padding:4px 31px 4px 6px;

		&:hover,
		&:focus,
		&:active {
			padding: 3px 30px 3px 5px;
		}
	}

	a.cke_button_on.cke_button__source {
		padding: 3px 30px 3px 5px;

	}

	.cke_toolbox_main {
		display: block;
		order: 2;
	}

	.cke_top.min,
	.cke_toolbox.min,
	.cke_toolbox_main.min {
		height: 32px !important; //!important to override inline styles set by ckeditor
		display: block !important;
	}

	.cke_combo__format .cke_combo_text {
		width: 45px; //adjust width to make icons line up across mutliple lines
	}

	.cke_contents {
		background: var(--sakai-background-color-1);
	}
}

#ckeditorPreview.modal {

	.modal-dialog {
		width: 94%;
		max-width: 1200px;
	}

	.modal-content {
		color: var(--sakai-text-color-1);
		background: var(--sakai-background-color-1);
	}

	.sakaipreview-print {
		@extend .fa;
		@extend .fa-print;
	}

	.sakaipreview-close {
		@extend .fa;
		@extend .fa-times;
	}
}

.cke_inner.cke_reset.cke_maximized {
	position: fixed !important;
}

.cke_button_label.cke_button__templates_label {
	display: inline;
}

.cke_wysiwyg_frame {
	background: none !important; /* Use  of !important to override CKEditor's styles. */
}

.cke_dialog_contents_body .cke_tpl_list {
	height: 430px !important;
	background: var(--sakai-background-color-1);
	border-color: var(--sakai-border-color);

	.cke_tpl_item {
		border-color: var(--sakai-border-color);
		color: var(--sakai-text-color-1);
	}

	a:focus,
	a:hover,
	a:active {

		.cke_tpl_item {
			border-color: var(--sakai-border-color);
			background: var(--sakai-background-color-2);
		}
	}
}

.cke_dialog_body .cke_dialog_close_button {
	filter: var(--sakai-image-invert);
}
.cke_tpl_preview .cke_tpl_preview_img {
	width: 50px !important;
}

.cke_tpl_preview span{

	&.template-icon{
		font-family: FontAwesome;
		font-size: 3em;
		width: 50px;
		float: left;
		padding: 0px 5px 10px 0px;
		text-align: center;
	}
}

.cke_dialog_container {
	z-index: 100010 !important;
}
